<template>
    <div class="tab-content">
        <div class="breeding-section">
            <div class="section-header">
                <h4>深加工信息</h4>
                <div class="section-actions">
                    <el-button type="primary" size="small" plain>设置</el-button>
                </div>
            </div>
            <div class="info-grid">
                <div class="info-row">
                    <span class="info-label">规格：</span>
                    <span class="info-value">半产品 1组</span>
                </div>
            </div>
            <div class="info-grid right-grid">
                <div class="info-row">
                    <span class="info-label">负责人：</span>
                    <span class="info-value">小陈</span>
                </div>
            </div>
        </div>

        <div class="breeding-section">
            <div class="section-header">
                <h4>食品安全检查</h4>
            </div>
            <div class="certificate-container">
                <div class="certificate-images">
                    <div class="certificate-item">
                        <div class="certificate-image">
                            <img src="https://via.placeholder.com/150" alt="检查证明1" />
                        </div>
                        <el-button type="primary" size="small">入厂检测</el-button>
                    </div>
                    <div class="certificate-item">
                        <div class="certificate-image">
                            <img src="https://via.placeholder.com/150" alt="检查证明2" />
                        </div>
                        <el-button type="primary" size="small">出厂检验</el-button>
                    </div>
                    <div class="add-image">
                        <el-button type="primary" plain class="add-button">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

        <process-material title="甲酸" :batch="productionBatch" />
        <process-material title="乙酸" :batch="productionBatch" />
        <process-material title="烯烃酸" :batch="productionBatch" />
        <process-material title="6号" :batch="productionBatch" />

        <div class="breeding-section">
            <div class="section-header">
                <h4>企业信息</h4>
                <div class="section-actions">
                    <el-button type="primary" size="small" plain>设置</el-button>
                </div>
            </div>
            <div class="company-info">
                <div class="info-row">
                    <span class="info-label">公司名称：</span>
                    <span class="info-value">四川绿特食品有限公司</span>
                </div>
                <div class="info-row">
                    <span class="info-label">生产许可证号：</span>
                    <span class="info-value">SC21320542760</span>
                </div>
            </div>
        </div>

        <div class="breeding-section">
            <div class="section-header">
                <h4>企业照片</h4>
            </div>
            <div class="company-images">
                <div class="image-grid">
                    <div class="company-image">
                        <img src="https://via.placeholder.com/150x100" alt="企业照片1" />
                    </div>
                    <div class="company-image">
                        <img src="https://via.placeholder.com/150x100" alt="企业照片2" />
                    </div>
                    <div class="add-image">
                        <el-button type="primary" plain class="add-button">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import ProcessMaterial from './ProcessMaterial.vue'

// 接收父组件传递的批次信息
defineProps<{
    productionBatch: string
}>()
</script>

<style scoped>
/* 复用之前的样式 */
.breeding-section {
    background-color: #f9fafc;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.section-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-header h4 {
    font-size: 18px;
    margin-bottom: 0;
    color: #333;
}

.section-actions {
    display: flex;
    gap: 10px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.info-row {
    margin-bottom: 15px;
    display: flex;
}

.info-label {
    width: 120px;
    color: #666;
    font-weight: bold;
}

.info-value {
    color: #333;
}

.certificate-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.certificate-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}

.certificate-images {
    display: flex;
    align-items: center;
    gap: 10px;
}

.certificate-image {
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 4px;
    max-width: 150px;
    max-height: 150px;
    object-fit: cover;
}

.add-image {
    flex-shrink: 0;
}

.add-button {
    padding: 0;
    margin: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #409eff;
    color: white;
}

.company-info {
    margin-top: 20px;
}

.company-images .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.company-image {
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 4px;
    overflow: hidden;
}

.company-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>